<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>swcnb</title>
</head>

<body>

<div id="output"></div>
<div id="tijiao">
    <label for="UAV_num">无人机个数</label>
    <select id="UAV_num">
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>
    <label for="SNR">信噪比（dB）</label>
    <select id="SNR">
        <option value="0">0</option>
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
    </select>
    <label for="slot_num">发送帧数目</label>
    <select id="slot_num">
        <option value="60">60</option>
        <option value="70">70</option>
        <option value="80">80</option>
        <option value="90">90</option>
    </select>
    <input type='button' onclick="start_fig()" value="点击一下你就知道">
    <input type='button' onclick="clear1()" value="点击一下你就清空">
    <label id="avrg">0.00</label>
    <label id="avrg2">0.00</label>
    <label id="cha">0.00</label>
</div>
<div id="main" style="height:500px;width:600px;border:1px solid #ccc;padding:10px;"></div>










<!--Step:2 Import echarts-all.js-->
<!--Step:2 引入echarts-all.js-->
<!--表单获取内容：-->
<script src="js/echarts-all.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var flag = 0;
    var use_time = 0;
    var int;
    var UAV_num;
    var SNR;
    var slot_num;
    var slot_int = 0;

    function fileOpen2(name) {
        let xhr = new XMLHttpRequest(),
            okStatus = document.location.protocol === "file:" ? 0 : 200;
        xhr.open('GET', name, false);
        xhr.overrideMimeType("text/html;charset=utf-8");//默认为utf-8
        xhr.send(null);
        return xhr.status === okStatus ? xhr.responseText : null;
    }

    function start_fig() {
        clear1();
        UAV_num = document.getElementById("UAV_num").value;
        SNR = document.getElementById("SNR").value;
        slot_num = document.getElementById("slot_num").value;
        console.log(UAV_num,SNR,slot_num);
        int = setInterval("test(UAV_num,SNR,slot_num,0)", 300);
    }

    function test(UAV_num, SNR, slot_num, pose) {
        let str = fileOpen2("txtFile/" + UAV_num + "-" + SNR + "-" + slot_num + "-" + pose + ".txt");
        var strings = [];
        var nums = [];
        var labelNum = [];
        strings = str.split(";");
        strings.forEach(items => {
            nums.push(+items);
        })
        nums = nums.splice(0, nums.length - 1);
        slot_int = parseInt(slot_num);
        for (let i = 1; i < slot_int+1; i++) {
            let str = String(i);
            labelNum.push(+str);
        }
        pose = pose + 1;
        let str2 = fileOpen2("txtFile/" + UAV_num + "-" + SNR + "-" + slot_num + "-" + pose + ".txt");
        var strings2 = [];
        var nums2 = [];
        strings2 = str2.split(";");
        strings2.forEach(items => {
            nums2.push(+items);
        })
        nums2 = nums2.splice(0, nums2.length - 1);
        setValue(labelNum.slice(0, flag), nums.slice(0, flag), nums2.slice(0, flag));
        flag = flag + 4;
        if (flag === slot_int) {
            int = clearInterval(int);
        }
    }

    function setValue(labelNumber, number, number2) {
        myChart.setOption({
            title:{
                title: "swc010"
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: [{
                left: "right"
            }],
            xAxis: [
                {
                    type: 'category',
                    // min:0,
                    // max:90,
                    data: labelNumber
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitArea: {show: true}
                }
            ],
            series: [
                {
                    name: '传统方案',
                    type: 'line',
                    color: 'red',
                    data: number
                }, {
                    name: '数据驱动方案',
                    type: 'line',
                    color: 'green',
                    data: number2
                }
            ]
        });
        let num_array = number.map(Number);
        let num2_array = number2.map(Number);
        let sum = 0;
        let sum2 = 0;
        let len = num_array.length
        for (let i = 0; i<len; i++){
            sum+=num_array[i];
            sum2+=num2_array[i];
        }
        sum = sum/len;
        sum2 = sum2/len;
        // 改数
        document.getElementById("avrg").innerHTML=sum;
        document.getElementById("avrg2").innerHTML=sum2;
        document.getElementById("cha").innerHTML=(sum2-sum)/sum;
    }
    function clear1() {
        myChart.clear();
        flag = 0;
    }
</script>

</html>